<template>
  <view class="ver-layout">
    <view class="top-layout hor-layout-side-center">
      <view>选择时间</view>
      <image class="select-time-icon" src="@/static/home/ic_score_select_date.png"></image>
    </view>
    <!--  记录列表  -->
    <block v-if="recordList.length>0">
      <view v-for="(rItem,rIndex) in recordList" :key="rIndex" class="record-item">
        <view class="record-time">{{ rItem.time }}</view>
        <view v-for="(item,index) in rItem.records" :key="index" class="record-time-list hor-layout-side-center"
              :class="{'top':index===0}">
          <view>{{ item.created_at }}</view>
          <view class="record-item-point">+{{ item.points }}</view>
          <view>{{ item.desc }}</view>
        </view>
      </view>
      <u-loadmore v-if="loadingObj.status" margin-top="15" :status="loadingObj.status"/>
    </block>
    <view v-else class="list-no-data">暂无数据</view>
  </view>
</template>

<script>
import {CscoreDetailApi} from "@/api/recordStudy.js"

let engine = new CscoreDetailApi()
export default {
  name: "cscoreRecord",
  data() {
    return {
      studentObj: {},
      recordList: [],
      loadingObj: {
        status: '',
        current: 1,
        total: ''
      },
    }
  },
  onLoad(options) {
    this.studentObj = options
    this.refreshData()
  },
  onReachBottom(e) {
    this.loadMore()
  },
  methods: {
    refreshData() {
      this.loadingObj.current = 1
      this.loadingObj.status = ''
      this.recordList = []
      this.getCscoreRecordList()
    },
    loadMore() {
      if (this.loadingObj.current >= this.loadingObj.total) {
        this.loadingObj.status = 'nomore'
      } else {
        this.loadingObj.status = 'loading'
        this.loadingObj.current = this.loadingObj.current + 1
        this.getCscoreRecordList()
      }
    },
    loadFinish(total) {
      this.loadingObj.total = Math.ceil(total / 10)
      this.loadingObj.status = ''
      if (this.loadingObj.current >= this.loadingObj.total
          && this.recordList.length > 0) {
        this.loadingObj.status = 'nomore'
      }
    },
    getCscoreRecordList() {
      let sid = this.studentObj.student_id, page = this.loadingObj.current
      engine.getCscoreRecordList({sid, page}).then(res => {
        this.recordList = this.recordList.concat(res.data)
        this.loadFinish(res.total)
      })
    }
  }
}
</script>

<style>
page {
  background: #F2F2F2;
}

.top-layout {
  width: 100%;
  height: 50px;
  padding: 0px 12px;
  background: #FFFFFF;
}

.select-time-icon {
  width: 19px;
  height: 19px;
}

.record-time {
  margin-left: 12px;
  margin-top: 18px;
  margin-bottom: 12px;
  /* 文本样式 */
  font-size: 14px;
  font-family: PingFang SC;
  font-weight: bold;
  color: #333333;
}

.record-time-list {
  padding: 0px 12px;
  height: 46px;
  background: #FFFFFF;
  border-top: 1px solid #DCDCDC;
  /* 文本样式 */
  font-size: 12px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #7D7D7D;
}

.record-time-list.top {
  border-top: none;
}

.record-item-point {
  font-size: 12px;
  color: #FF873E;
}
</style>
